import React from "react";
import { Table, Tree, Modal } from "antd";
import { useState, useEffect } from "react";
import axios from "axios";
import { Button, Popconfirm, Popover } from "antd";
import { DeleteOutlined, UnorderedListOutlined } from "@ant-design/icons";
export default function RoleList() {
  const [dataSource, setDataSource] = useState([]);
  const [rightList, setRightList] = useState([]);
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [currentRight, setCurrentRight] = useState({});
  const [currentID, setCurrentID] = useState(0);
  useEffect(() => {
    const getDataSource = async () => {
      const res = await axios.get("http://localhost:3000/roles");
      const right = await axios.get(
        "http://localhost:3000/rights?_embed=children"
      );
      setDataSource(res.data);
      setRightList(right.data);
    };
    getDataSource();
  }, []);

  const columns = [
    {
      title: "ID",
      dataIndex: "id",
      key: "id",
    },
    {
      title: "角色名称",
      dataIndex: "roleName",
      key: "roleName",
    },
    {
      title: "操作",
      render: (item) => {
        return (
          <>
            <Popconfirm
              title="确定删除吗？"
              okText="确定"
              cancelText="取消"
              onConfirm={() => {
                confirmDelete(item);
              }}
            >
              <Button icon={<DeleteOutlined />} shape="circle" danger></Button>
            </Popconfirm>
            <Button
              icon={<UnorderedListOutlined />}
              shape="circle"
              color="blue"
              onClick={() => showModal(item)}
            ></Button>
          </>
        );
      },
    },
  ];
  const confirmDelete = (item) => {
    //前端删除逻辑
    setDataSource(dataSource.filter((data) => data.id !== item.id));
    //后端删除逻辑
    axios.delete(`http://localhost:3000/roles/${item.id}`).then((err) => {
      if (err) {
        console.log(err);
      }
    });
  };

  const showModal = (item) => {
    setIsModalOpen(true);
    //将当前未操作的权限保存起来
    setCurrentRight(item.rights);
    //记录当前操作的角色id
    setCurrentID(item.id);
  };

  const handleOK = (currentID) => {
    setIsModalOpen(false);
    //同步datasource
    setDataSource(
      dataSource.map((item) =>
        item.id === currentID ? { ...item, rights: currentRight } : item
      )
    );
    //同步后端
    axios.patch(`http://localhost:3000/roles/${currentID}`, {
      rights: currentRight,
    });
  };

  const onCheck = (checkedKeys) => {
    //每次点击完一个节点之后 会返回一个新的节点数组
    console.log(checkedKeys);
    //将当前操作完的权限保存起来
    setCurrentRight(checkedKeys.checked);
  };

  return (
    <div>
      {/*rowKey 如果数据中没有key这个属性，那就使用这个方法来赋值 表格行 key 的取值，可以是字符串或一个函数 */}
      <Table
        dataSource={dataSource}
        columns={columns}
        pagination={{
          pageSize: 5,
        }}
        rowKey={(item) => item.id}
      />
      <Modal
        onOk={() => handleOK(currentID)}
        onCancel={() => setIsModalOpen(false)}
        title="权限分配"
        open={isModalOpen}
      >
        <Tree
          checkable
          // defaultCheckeys是一个非受控的组件 意思是这个组件只会显示默认选中的节点，不会受后续的修改 后续修改后也会不刷新组件
          //在antd中一般加上default属性都是非受控的
          checkedKeys={currentRight} //受控组件 但是表单里面的节点只能通过状态来控制
          onCheck={onCheck} //可以修改状态 来改变受控组件的结果
          treeData={rightList}
          // 可能是版本问题 如果不添加自定义属性 所有的数据都会被占位符代替 可能是因为我的数据和tree遍历的方法有冲突
          checkStrictly={true} // 不进行父子关联(父项勾选 子项全都被勾选)
          fieldNames={{
            title: "label",
            key: "key",
          }}
        />
      </Modal>
    </div>
  );
}
